<template>
    <div>
       <Form inline class="ivu-mt">
            <FormItem class="ivu-mb-0">
      <RadioGroup v-model="patientDate" type="button">
          <Radio label="today">今天</Radio>
            <Radio label="yesterDay">昨天</Radio>
            <Radio label="sevenDay">7天</Radio>
            <Radio label="month">月</Radio>
        </RadioGroup>
        </FormItem>
        <FormItem class="ivu-mb-0">
        <DatePicker type="daterange" v-width="'100%'" v-model="date" placeholder="日期选择" />
        </FormItem>
        <FormItem class="ivu-mb-0">
         <Select v-model="model2" style="width:200px">
         <Option v-for="item in postList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
        </FormItem>
        </Form>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Table :columns="columns" :data="data" :loading="loading" border show-summary>
            </Table>
        </Card>
    </div>
</template>

<script>
    export default {
        name: 'index',
        data () {
            return {
                loading: false,
                patientDate: 'today',
                model2: '',
                date: [(new Date()), (new Date())],
                postList: [
                    {
                        value: '医助',
                        label: '医助'
                    },
                    {
                        value: '客服',
                        label: '客服'
                    }
                ],
                columns: [
                    {
                        title: '项目',
                        key: 'name',
                        align: 'center',
                        width: 118,
                        fixed: 'left'
                    },
                    {
                        title: '总次数',
                        key: 'total',
                        align: 'center',
                        width: 90,
                        fixed: 'left'
                    },
                    {
                        title: '总人数',
                        key: 'totalPerson',
                        align: 'center',
                        width: 90,
                        fixed: 'left'
                    },
                    {
                        title: '正常回访比例',
                        key: 'visitRatio',
                        align: 'center',
                        width: 125,
                        fixed: 'left'
                    },
                    {
                        title: '回访方式',
                        align: 'center',
                        children: [
                            {
                                title: '电话',
                                key: 'phone',
                                width: 80
                            },
                            {
                                title: '微信',
                                key: 'weixin',
                                width: 80
                            },
                            {
                                title: 'QQ',
                                key: 'qq',
                                width: 80
                            },
                            {
                                title: '其它',
                                key: 'other',
                                width: 80
                            }
                        ]
                    },
                    {
                        title: '回访状态',
                        align: 'center',
                        children: [
                            {
                                title: '未接通',
                                key: 'Unconnected',
                                width: 90
                            },
                            {
                                title: '正常回访',
                                key: 'normal',
                                width: 118
                            },
                            {
                                title: '拉黑',
                                key: 'balcklist',
                                width: 90
                            },
                            {
                                title: '已到院',
                                key: 'already',
                                width: 90
                            }
                        ]
                    },
                    {
                        title: '数据年份',
                        align: 'center',
                        children: [
                            {
                                title: '2020',
                                key: 'year',
                                width: 90
                            },
                            {
                                title: '2019',
                                key: 'year1',
                                width: 90
                            },
                            {
                                title: '2018',
                                key: 'year2',
                                width: 90
                            },
                            {
                                title: '2017',
                                key: 'year3',
                                width: 90
                            },
                            {
                                title: '2016',
                                key: 'year4',
                                width: 90
                            },
                            {
                                title: '2015',
                                key: 'year5',
                                width: 90
                            },
                            {
                                title: '2014',
                                key: 'year6',
                                width: 90
                            }
                        ]
                    }
                ],
                data: []
            }
        },
        mounted () {
            const data = [];
            for (let i = 1; i < 10; i++) {
                data.push({
                    key: i,
                    name: '项目' + i,
                    totalPerson: Math.round(Math.random() * 500),
                    visitRatio: '60%',
                    total: Math.round(Math.random() * 800),
                    phone: Math.round(Math.random() * 10),
                    weixin: Math.round(Math.random() * 10),
                    qq: Math.round(Math.random() * 10),
                    other: Math.round(Math.random() * 10),
                    Unconnected: Math.round(Math.random() * 30),
                    normal: Math.round(Math.random() * 10),
                    balcklist: Math.round(Math.random() * 10),
                    already: Math.round(Math.random() * 10),
                    year: Math.round(Math.random() * 10),
                    year1: Math.round(Math.random() * 10),
                    year2: Math.round(Math.random() * 10),
                    year3: Math.round(Math.random() * 10),
                    year4: Math.round(Math.random() * 10),
                    year5: Math.round(Math.random() * 10),
                    year6: Math.round(Math.random() * 10)
                });
            }
            this.data = data;
        },
        methods: {
        }
    }
</script>

<style scoped>

</style>
